<template>
  <div class="container-echart">
    <div :id="'echart' + timeId" class="interface-echart"></div>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import {EChartsType} from 'echarts'
import * as THREE from "three";
import {onMounted, ref, watch, onBeforeUnmount, nextTick} from 'vue'
// import geoJson from './ChinaMap.json'; //导入地图数据，从中国地图获取的数据需要引入并注册
// echarts.registerMap('china', {geoJSON: geoJson}); //注册可用地图

const props = defineProps({
  provinceAdcode: {
    type: Number,
    default: 0,
  },
})
const emit = defineEmits(["changeCity"]);
let myEchart: EChartsType
const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id

// 请求在线地图数据
const loadGeoJson = async (adcode: number): Promise<any> => {
  const url = `https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`;
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`地图数据加载失败: ${response.statusText}`);
    }
    return await response.json();
  } catch (error) {
    console.error('地图数据加载失败:', error);
    return null;
  }
};
// 动态加载地图并渲染
const loadAndRenderMap = async (adcode: number) => {
  const geoJson = await loadGeoJson(adcode);
  if (!geoJson) {
    console.warn(`未能加载 Adcode 为 ${adcode} 的地图数据`);
    return;
  }

  // 注册地图
  const mapName = `map_${adcode}`;
  echarts.registerMap(mapName, {geoJSON: geoJson});

  // 获取第一个省份名称
  const firstProvinceName = geoJson.features[0]?.properties?.name || '';
  console.log("=>(chartAreaMap.vue:50) firstProvinceName", firstProvinceName);
  let code = geoJson.features[0]?.properties?.adcode;
  emit("changeCity", code);

  // 更新地图配置
  const option = {
    geo: {
      map: mapName,
      roam: false,
      selectedMode: "single",
      label: {
        show: true,
        color: '#ffffff',
        fontSize: 14,
      },
      itemStyle: {
        areaColor: "#9cb8e4",
        borderColor: "#ffffff",
        shadowColor: '#9cb8e4', //阴影颜色
        shadowOffsetX: 0, //阴影偏移量
        shadowOffsetY: 10, //阴影偏移量
      },
      emphasis: {
        label: {
          show: true,
          color: '#ffffff',
        },
        itemStyle: {
          areaColor: "#6695e3",
        }
      }
    },
    select: { // 选中样式
      label: {
        show: true,
        color: '#ffffff',
      },
      itemStyle: {
        areaColor: "#ffb47e", // 选中时的颜色
        borderColor: '#ffffff', // 选中时的边框颜色
        borderWidth: 2, // 选中时的边框宽度
        shadowColor: '#ffb47e',
      }

    },
  };

  myEchart.setOption(option, {notMerge: true});

  // 手动选中省份
  myEchart.dispatchAction({
    type: 'geoSelect', // 手动触发选中动作
    name: firstProvinceName,
  });
  const jsonData = await loadGeoJson(adcode);

  myEchart.off('click');// 跟2D地图添加点击事件相比多了这行代码
  myEchart.on('click', (params) => {
    console.log("=>(chartAreaMap.vue:183) params", params);
    if (params.componentType === 'geo') {
      const clickedRegionName = params.name;

      const region = jsonData.features.find(
          (feature) => feature.properties.name === clickedRegionName
      );
      if (region) {
        const {adcode} = region.properties;
        emit("changeCity", adcode);
        console.log(`点击区域: ${clickedRegionName}, adcode: ${adcode}`);
      } else {
        console.log(`未找到 ${clickedRegionName} 对应的 adcode`);
      }
      // 从 geoJSON 数据中查找对应区域信息
      // console.log(props.provinceAdcode);
      // console.log("=>(chartAreaMap.vue:98) data", jsonData);
      // const loader = new THREE.FileLoader();
      // loader.load("/json/ChinaMap.json", (data) => {
      //   let jsondata = JSON.parse(data);
      //   const region = jsondata.features.find(
      //       (feature) => feature.properties.name === clickedRegionName
      //   );
      //   if (region) {
      //     const { adcode } = region.properties;
      //     console.log(`点击区域: ${clickedRegionName}, adcode: ${adcode}`);
      //   } else {
      //     console.log(`未找到 ${clickedRegionName} 对应的 adcode`);
      //   }
      // });
    }
  })
};

const myEchartData = () => {
  const option = {
    backgroundColor: 'transparent', //背景色
    tooltip: {
      trigger: 'item',
      show: true,
      formatter: function (params) {
        //console.log(params);
        params.data.departmentnames.forEach((item) => {
          return item;
        })
        // if (params.data && params.data.departmentnames.length) {
        //   let str = `${params.name}，共计${params.data.departmentnames.length}个事业部：<br />`;
        //   params.data.departmentnames.forEach((item) => {
        //     str += `${item}<br />`
        //   })
        //   return str;
        // } else {
        //   return `${params.name}省，共计0个事业部<br />`
        // }
      }
    },
    geo: { //地理坐标系组件   地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制
      map: 'china', //地图类型  这儿展示的是中国地图
      aspectScale: 0.85,
      selectedMode: "single",// 开启单选
      label: {
        show: true, //是否显示标签  此处指是否显示地图上的地区名字
        color: '#ffffff',
        fontSize: 14
      },
      roam: false, //是否开启鼠标缩放和平移漫游
      itemStyle: {
        areaColor: "#03365b",
        borderColor: "#4bf3f9",
        shadowColor: '#03365b', //阴影颜色
        shadowOffsetX: 0, //阴影偏移量
        shadowOffsetY: 10, //阴影偏移量
      },
      emphasis: {
        label: {
          show: true,
          color: '#ffffff',
        },
        itemStyle: {
          areaColor: "#0f5d9d",
        }
      }
    },
    // series: [{
    //   type: "effectScatter",
    //   coordinateSystem: "geo",
    //   showEffectOn: "render",
    //   data: [
    //     {
    //       name: '上海',
    //       departmentnames: ["长三角设计中心-上海"],
    //       value: [121.4648, 31.2891],
    //       itemStyle: {color: '#f56321'}
    //     },
    //     {
    //       name: '重庆',
    //       departmentnames: ["总承包事业部", "桥梁事业部", "道路事业部", "轨道事业部", "生态环境事业部", "同望水利事业部", "城市发展事业部", "勘察事业部"],
    //       selected: true,
    //       value: [107.7539, 30.1904],
    //       itemStyle: {color: '#eeb804'}
    //     }
    //   ],
    //   rippleEffect: {
    //     brushType: "stroke",
    //     scale: 5,
    //     period: 2, // 秒数
    //   },
    //   symbolSize: 12,
    //   clickable: false,
    //   hoverAnimation: true,
    //   zlevel: 1,
    //   label: {
    //     normal: {
    //       formatter: "{b}",
    //       position: "right",
    //       show: true,
    //     },
    //   },
    // }
    // ]
  }
  // { notMerge: true } 解决删除数据时,数据不刷新的问题
  myEchart.setOption(option, {notMerge: true})
  myEchart.off('click');// 跟2D地图添加点击事件相比多了这行代码
  myEchart.on('click', (params) => {
    console.log("=>(chartAreaMap.vue:183) params", params);
    if (params.componentType === 'geo') {
      const clickedRegionName = params.name;
      // 从 geoJSON 数据中查找对应区域信息
      const loader = new THREE.FileLoader();
      loader.load("/json/ChinaMap.json", (data) => {
        let jsondata = JSON.parse(data);
        const region = jsondata.features.find(
            (feature) => feature.properties.name === clickedRegionName
        );
        if (region) {
          const {adcode} = region.properties;
          console.log(`点击区域: ${clickedRegionName}, adcode: ${adcode}`);
        } else {
          console.log(`未找到 ${clickedRegionName} 对应的 adcode`);
        }
      });
    }
  })
}
const getProvinceNameByAdcode = (adcode: number): string => {
  const adcodeToProvinceMap: { [key: number]: string } = {
    110000: '北京市',
    120000: '天津市',
    130000: '河北省',
    140000: '山西省',
    150000: '内蒙古自治区',
    210000: '辽宁省',
    220000: '吉林省',
    230000: '黑龙江省',
    310000: '上海市',
    320000: '江苏省',
    330000: '浙江省',
    340000: '安徽省',
    350000: '福建省',
    360000: '江西省',
    370000: '山东省',
    410000: '河南省',
    420000: '湖北省',
    430000: '湖南省',
    440000: '广东省',
    450000: '广西壮族自治区',
    460000: '海南省',
    500000: '重庆市',
    510000: '四川省',
    520000: '贵州省',
    530000: '云南省',
    540000: '西藏自治区',
    610000: '陕西省',
    620000: '甘肃省',
    630000: '青海省',
    640000: '宁夏回族自治区',
    650000: '新疆维吾尔自治区',
    710000: '台湾省',
    810000: '香港特别行政区',
    820000: '澳门特别行政区'
  };

  return adcodeToProvinceMap[adcode] || '';
}
// 根据省份名称获取 Adcode
const getProvinceAdcodeByName = (provinceName: string): number => {
  const provinceToAdcodeMap: { [key: string]: number } = {
    '北京市': 110000,
    '天津市': 120000,
    '河北省': 130000,
    '山西省': 140000,
    '内蒙古自治区': 150000,
    '辽宁省': 210000,
    '吉林省': 220000,
    '黑龙江省': 230000,
    '上海市': 310000,
    '江苏省': 320000,
    '浙江省': 330000,
    '安徽省': 340000,
    '福建省': 350000,
    '江西省': 360000,
    '山东省': 370000,
    '河南省': 410000,
    '湖北省': 420000,
    '湖南省': 430000,
    '广东省': 440000,
    '广西壮族自治区': 450000,
    '海南省': 460000,
    '重庆市': 500000,
    '四川省': 510000,
    '贵州省': 520000,
    '云南省': 530000,
    '西藏自治区': 540000,
    '陕西省': 610000,
    '甘肃省': 620000,
    '青海省': 630000,
    '宁夏回族自治区': 640000,
    '新疆维吾尔自治区': 650000,
    '台湾省': 710000,
    '香港特别行政区': 810000,
    '澳门特别行政区': 820000
  };

  return provinceToAdcodeMap[provinceName] || 0;
}
// 监听 adcode 变化
watch(
    () => props.provinceAdcode,
    (newVal) => {
      if (newVal) {
        loadAndRenderMap(newVal);
      }
    },
    {immediate: true} // 初始化时也加载一次
);
// watch(
//     () => props.provinceAdcode,
//     (newVal) => {
//       console.log(newVal);
//       // 根据 Adcode 获取省份名称
//       const provinceName = getProvinceNameByAdcode(newVal);
//       if (provinceName) {
//         // 设置地图高亮样式
//         myEchart.setOption({
//           geo: {
//             regions: [], // 清空 regions，避免冲突
//             emphasis: {
//               itemStyle: {
//                 areaColor: '#eeb804', // 高亮颜色
//               },
//             },
//           },
//         });
//
//         // 手动选中省份
//         myEchart.dispatchAction({
//           type: 'geoSelect', // 手动触发选中动作
//           name: provinceName,
//         });
//       } else {
//         console.warn('未找到对应的省份名称');
//       }
//     }
// );
onMounted(() => {
  setTimeout(() => {
    const dom = document.getElementById(`echart${timeId.value}`) as any
    myEchart = echarts.init(dom)
    // myEchartData()
    let adCode = localStorage.getItem('regionCode')
    loadAndRenderMap(Number(adCode));
  }, 500)

  // 当窗口发生变化时
  window.addEventListener('resize', () => {
    myEchart.resize()
  })
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', () => {
    myEchart.resize()
  })
})
</script>
<style scoped lang="scss">
.container-echart {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.interface-echart {
  width: 100%;
  height: 500px;
}
</style>